import React from 'react';
import PropTypes from 'prop-types';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { clearAuthState } from '../store/authSlice';
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
import { logout,  } from '../api/apiFunctions';

const UserInfoDialog = ({ open, onClose, userInfo }) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const handleLogout = async() => {
    navigate('/login');
    await loginOut()
    dispatch(clearAuthState());
  };


  const loginOut = async () => {
    try {
      const response = await logout(); // 调用后端登出接口
      console.log('Logout response:', response);
   
    } catch (error) {
      console.error('Failed to logout:', error);
    }
  };

  const handleNavigate = (path) => {
    navigate(path);
  };

  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>用户信息</DialogTitle>
      <DialogContent>
        用户名: {userInfo.fullName}<br />
        手机号: {userInfo.phoneNumber}<br />
        部门: {userInfo.departmentName}
      </DialogContent>
      <DialogActions>
        <Button onClick={handleLogout} color="primary">注销</Button>
        <Button onClick={() => handleNavigate('/')} color="primary">综合后台</Button>
        <Button onClick={onClose} color="primary">关闭</Button>
      </DialogActions>
    </Dialog>
  );
};

UserInfoDialog.propTypes = {
  open: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  userInfo: PropTypes.shape({
    fullName: PropTypes.string.isRequired,
    phoneNumber: PropTypes.string.isRequired,
    departmentName: PropTypes.string.isRequired,
  }).isRequired,
};

export default UserInfoDialog;
